Skip to content

ezxrARSession-3dof 算法插件

3DoF 算法(也叫 imu 算法)是利用手机设备的姿态同步并更新渲染相机的位姿,实现手机与虚拟内容的交互的能力。

插件申请和示例代码

为了快速对插件进行基础的了解和认识,请直接下载示例 Demo,使用微信小程序开发工具打开,修改 AppId 为已申请插件授权的 AppID,替换绑定了上述 AppID 的内容资源,然后在真机扫码预览效果。

  • 插件权限申请

    • 首先要在小程序管理后台的“设置-第三方服务-插件管理”中添加插件,通过 AppID** [wx33b4f056bf74d649]** 查找插件并添加。
    • 或者在微信小程序开发者工具中,导入示例 Demo 以后,等开发工具提示需要插件权限时,点击『申请』
  • 内容资源替换

    • 第一步,在洞见 AR-World 小程序能力平台创建 3DoF 跟踪 - 沉浸环绕内容
    • 第二步,参考接入示例接入
  • 示例 Demo

ezxrARSession-3dof-demo.zip

更新日志

20230726 v1.1.1 
    优化 3DoF 效果 
 
20230302 v1.1.0 
    支持 unity 和 threejs Web 双编辑器  
    支持洞见 AR-World 小程序能力平台配置 
    支持拍照

使用说明

快速使用插件请直接使用代码示例 Demo,后续内容开发建议以代码示例 Demo 为基础开发。

此说明更适用于帮助理解。

3.1 添加插件

javascript
"plugins": {
    "ezxrARSession": {
        "version": "1.1.1",
        "provider": "wx33b4f056bf74d649"
    }
},

3.2 引用插件

此插件提供的页面入口地址为:plugin://ezxrARSession/ARSession

javascript
//在page或component的js文件中添加
const plugin = requirePlugin('ezxrARSession')

//在page或component的json文件中添加
"usingComponents": {
    "ezxr-arsession": "plugin://ezxrARSession/ARSession"
}

//在page或component的wxml文件中添加
<ezxr-arsession id="ezxr-arsession"></ezxr-arsession>

 this.ezxr = new plugin.AREzxr(); // 同下文中this.arEzxr

3.2 提供方法

插件对外提供 ARSession 组件和 AREzxr 方法库。

【ARSession 组件】

方法名称方法说明入参与返回
fnStart

算法启动

trackerType:跟踪类型,填1;

locationType:定位类型,填0;

trackerOption:跟踪参数,有 renderer(渲染引擎renderer)

【AREzxr 方法库】

方法名称方法说明入参与返回
checkARSupport查询是否支持 AR

返回:{

arSupport, // 当前设备是否支持AR体验

camFov //需要传递给渲染引擎

}

fnWxRequestRes

获取内容平台配置

入参如下:

cid:内容平台 cid(同内容id)

key:内容平台环境,development(测试)/production(线上)

返回如下:

contentId:内容ID

contentName:内容名

contentPackageUrl:内容包资源链接

contentType:内容类别,3-沉浸式环绕

editorType: 1-web 编辑器 2-unity 编辑器

PoseUpdate获取 GL 坐标 pose算法更新。

fnGetGlobalGLPose

获取 ezxrGL 坐标 pose

获取算法坐标。

返回:{ ezxrPose,pose,timestamp,spaceUncertainty,timeUncertainty}

fnTakephoto拍照返回:临时存储路径

3.3 接入示例

3.3.1 ARSession 组件及方法使用示例

组件引用:

javascript
//在page或component的json文件中添加
"usingComponents": {
    "ezxr-arsession": "plugin://ezxrARSession/ARSession"
}
//在page或component的wxml文件中添加
<ezxr-arsession id="ezxr-arsession"></ezxr-arsession>
//在page或component的js文件中添加
this.arSessionCpt = this.selectComponent('#ezxr-arsession');

组件(this.arSessionCpt)提供方法使用:

javascript
//在page或component的js文件中添加本模块示例

_// 获取渲染引擎的renderer,此处仅为示例,可从代码示例demo中查看this.arContentCpt的引用_
// 需要确保在渲染引擎初始化成功之后 todo
_const wcengine = this.arContentCpt.fnGetWCEngineRenderer(); _
// 算法启动, 可渲染背景;
const onStarted = () => {   
    console.log("Tracker onStarted");
};
// 算法初始化完成, 可获得camera pose;
// 初始化后同步内容和算法fov, 同时获取pose开始显示内容;
const onRecogSuccess = () => {  
    console.log("Tracker onCompleted");
    // 获取算法Fov, 设置内容渲染fov
    const camFov = this.ezxr.fnGetCameraFov();
    this.arContentCpt.fnSetCameraFov(camFov);
}
_const trackerOption = {
    renderer: wcengine,
    onStarted: onStarted,
    onRecogSuccess: onRecogSuccess,
__};_
//算法启动,要求先启动内容后再启动算法
const trackerType = this.data.TRACK_TYPE.DOF_3;
this.arSessionCpt.fnStart(trackerType, trackerOption);;

3.3.2 AREzxr 方法使用示例

AREzxr 引用:

javascript
//在page或component的js文件中添加
const plugin = requirePlugin('ezxrARSession')
this.ezxr = new plugin.AREzxr();

AREzxr 提供方法使用:

javascript
//在page或component的js文件中添加

// 从内容平台获取资源
const response = await this.ezxr.fnWxRequestRes(7907, 'development'); // 测试环境
console.log('content response', response);

// 获取设备支持&获取内容配置
const ins = await this.ezxr.checkARSupport();
console.log('ARSupport', ins);
javascript
// 在渲染引擎的js文件Update中添加
// 渲染更新
this.ezxr.PoseUpdate();
const poseStatus = this.ezxr.fnGetGlobalGLPose();

// 如使用非易现Insihgt渲染(如threejs-miniProgram),则获取标准的GLPose;对应web编辑器
this.contentCpt.fnSetCameraPose(poseStatus.pose);
// 如使用易现Inisht渲染,则获取ezxrGLPose。对应unity编辑器
this.contentCpt.fnSetCameraPose(poseStatus.ezxrPose);
javascript
// 拍照
const path = await this.ezxr.fnTakephoto();
console.log(" img.takephoto ", path)